.#{$ns}ListControl {
    &-items {
        display: block;
        margin: -$ListControl-gutterWidth/2;

        &:empty {
            display: none;
        }
    }

    &-item {
        position: relative;
        user-select: none;
        font-size: $ListControl-fontSize;
        display: inline-block;
        vertical-align: middle;
        margin: $ListControl-gutterWidth/2;
        border: $ListControl-item-borderWidth solid
            $ListControl-item-borderColor;
        background-color: $ListControl-item-bg;
        padding: $ListControl-item-paddingY $ListControl-item-paddingX;
        color: $ListControl-item-color;
        transition: $ListControl-item-transition;
        max-width: px2rem(200px) + 2 * $ListControl-item-paddingX;

        &:not(.is-disabled) {
            cursor: pointer;
        }

        .b-t,
        .b-l,
        .b-r,
        .b-b,
        .b-a {
            border-color: $ListControl-item-color;
        }

        @include hover {
            background-color: $ListControl-item-onHover-bg;
            border-color: $ListControl-item-onHover-borderColor;
            color: $ListControl-item-onHover-color;

            .b-t,
            .b-l,
            .b-r,
            .b-b,
            .b-a {
                border-color: $ListControl-item-onHover-borderColor;
            }
        }

        &.is-disabled {
            pointer-events: none;
            opacity: $ListControl-item-onDisabled-opacity;

            @if variable-exists("ListControl-item-onDisabled-bg") {
                background-color: $ListControl-item-onDisabled-bg;
            }

            @if variable-exists("ListControl-item-onDisabled-color") {
                color: $ListControl-item-onDisabled-color;
            }

            .b-t,
            .b-l,
            .b-r,
            .b-b,
            .b-a {
                border-color: $ListControl-item-onDisabled-borderColor;
            }
        }

        &:hover:active,
        &.is-active {
            background-color: $ListControl-item-onActive-bg;
            border-color: $ListControl-item-onActive-borderColor;
            color: $ListControl-item-onActive-color;

            @if variable-exists("ListControl-item-onActive-onHover-bg") {
                &:hover {
                    background-color: $ListControl-item-onActive-onHover-bg;
                }
            }

            .b-t,
            .b-l,
            .b-r,
            .b-b,
            .b-a {
                border-color: $ListControl-item-onActive-color;
            }

            &:before {
                content: "";
                position: absolute;
                width: px2rem(14px);
                height: px2rem(14px);
                background-color: $ListControl-item-bg;
                right: 0;
                bottom: 0;
            }

            &:after {
                content: "";
                position: absolute;
                width: px2rem(10px);
                height: px2rem(5px);
                border-color: $ListControl-item-onActive-bg;
                border-style: solid;
                border-width: 0 0 px2rem(2px) px2rem(2px);
                right: px2rem(1px);
                bottom: px2rem(5px);
                transform: rotate(-40deg);
            }
        }
    }

    &-itemImage {
        margin: $ListControl-item-paddingY * -1 $ListControl-item-paddingX * -1;

        img {
            display: block;
            max-width: 100%;
        }
    }

    &-itemLabel {
        text-align: center;
    }

    &-itemImage + &-itemLabel {
        margin-top: $ListControl-item-paddingY;
    }

    &-placeholder {
        color: $Form-input-placeholderColor;
    }
}
